<template>
	<!-- 返回顶部 -->
	<div @click="goTop" class="goTop">
		<svg class="icon" aria-hidden="true">
			<use xlink:href="#icon-icon_goTop"></use>
		</svg>
	</div>
	<!-- 返回顶部 -->
</template>

<script>
	export default {
		name: 'Footer',
		data() {
			return{
				gotop: false,
			}
		},
		mounted() {
			// 此处true需要加上，不加滚动事件可能绑定不成功
			window.addEventListener("scroll", this.handleScroll, true);
		},
		methods:{
			handleScroll() {
				let scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
				scrolltop > 30 ? (this.gotop = true) : (this.gotop = false);
			},
			goTop() {
				let top = document.documentElement.scrollTop || document.body.scrollTop;
				// 实现滚动效果 
				const timeTop = setInterval(() => {
					document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
					if (top <= 0) {
						clearInterval(timeTop);
					}
				}, 10);
			}
		},
	}
</script>

<style>
	@import url("../assets/css/style.css");
</style>
